<!--
@description ：投放统计--页面统计
-->

<template>
  <div class="app-container">
    <NormalForm ref="normalForm" :enumOpt="enumOpt" :formList="formList" :operateForm="queryForm"
                @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    <div class="g-card" style="padding: 20px">
      <div style="display: flex;justify-content: space-between;margin-bottom: 20px;line-height: 40px">
        <div>
          <span style="margin-right: 12px">总访问量: {{ allViewCount }}</span>
          <span style="margin-right: 12px">总访问人数: {{ allPeopleCount }}</span>
          <span>总留资数: {{ allRetainCount }}</span>
        </div>
        <div>
          <el-button size="small" type="primary" @click="exportDetail" v-has-permi="['placment:page:export']">数据导出</el-button>
        </div>
      </div>
      <el-table ref="tableRef" v-loading="tableLoading" :data="tableData" :row-style="{ height: '40px' }"
                :show-summary="true" :summary-method="summaryMethod"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" max-height="460" row-key="journeyConfigId"
                @selection-change="handleSelectionChange">
        <el-table-column align="center" fixed type="selection" width="45">
        </el-table-column>
        <el-table-column :min-width="140" align="center" label="日期" prop="date"></el-table-column>
        <el-table-column :min-width="180" align="center" label="页面名称" prop="pageTitle"
                         show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="160" align="center" label="渠道命名" prop="customerSource"
                         show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="当日访问量" prop="pv"></el-table-column>
        <el-table-column align="center" label="当日访问人数" prop="uv"></el-table-column>
        <el-table-column align="center" label="当日留资数" prop="totalCustomer"></el-table-column>
        <el-table-column align="center" label="留资率" prop="totalCustomerPercent">
          <template slot-scope="{row}">
            {{ row.totalCustomerPercent || 0 }}%
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
                        @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></NormalPagination>
    </div>
  </div>
</template>
<script>
import {downLoadFile} from "@/utils/common";
import {getCapitalSource, queryCapitalPageDetail} from "@/api/placementStatistics";
import moment from "moment";

export default {
  name: "placementPageStatisticsList", //页面名称，必填
  props: {},
  components: {},
  data() {
    return {
      queryForm: {
        pageTitle: '',
        sourceId: '',
        timeType: '0',
        selectTime: [],
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '页面名称',
          value: '',
          prop: 'pageTitle',
          type: 'INPUT',
          emunName: ''
        },
        {
          label: '渠道命名',
          value: '',
          prop: 'sourceId',
          type: 'CASCADER',
          emunName: 'sourceIdList',
          props: {checkStrictly: true},
        },
        {
          label: '',
          value: '1',
          prop: 'timeType',
          type: 'RADIO_DATE_SELECT',
          emunName: 'timeTypeOpt',
          xs: 24,
          ls: 12,
          md: 8,
          lg: 6,
          xl: 4,
        },
        {
          label: '',
          value: [],
          prop: 'selectTime',
          type: 'DATE_RANGE',
          emunName: '',
          formate: 'yyyy-MM-dd',
        },
      ],
      enumOpt: {
        sourceIdList: [],
        timeTypeOpt: [
          {dictValue: '0', dictLabel: '今日'},
          {dictValue: '1', dictLabel: '最近7天'},
          {dictValue: '2', dictLabel: '最近30天'},
        ],
      },
      tableData: [],
      tableLoading: false,
      total: 0,
      allViewCount: 0,
      allPeopleCount: 0,
      allRetainCount: 0,
      pvCount: 0,
      uvCount: 0,
      retainCount: 0,
      checkedList: [],
    }
  },
  watch: {},
  methods: {
    handleQuery() {
      console.log(this.queryForm, 'queryForm')
      this.queryForm.pageNum = 1
      this.getList()
    },
    handleReset() {
      this.queryForm = {
        pageTitle: '',
        sourceId: '',
        timeType: '0',
        selectTime: [moment(new Date()).format('YYYY-MM-DD'), moment(new Date()).format('YYYY-MM-DD')],
        pageNum: 1,
        pageSize: 20,
      }
      this.handleQuery()
    },
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.getList()
    },
    getList() {
      let customerSource = ''
      let customerWay = ''
      if (this.queryForm.sourceId) {
        if (this.queryForm.sourceId.length == 1) {
          customerSource = this.queryForm.sourceId[0]
        } else if (this.queryForm.sourceId.length == 2) {
          customerWay = this.queryForm.sourceId[1]
        }
      }
      let obj = {
        startTime: this.queryForm.selectTime && this.queryForm.selectTime.length == 2 ? this.queryForm?.selectTime[0] : moment(new Date()).format('YYYY-MM-DD'),
        endTime: this.queryForm.selectTime && this.queryForm.selectTime.length == 2 ? this.queryForm?.selectTime[1] : moment(new Date()).format('YYYY-MM-DD'),
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
        pageTitle: this.queryForm.pageTitle,
        customerSource,
        customerWay
      }
      console.log(obj, 'obj')
      this.tableData = []
      this.tableLoading = true
      queryCapitalPageDetail(obj).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.scrmRetainCapitalResVOList || []
          this.total = res.data?.total
          this.allViewCount = res.data?.totalPV
          this.allPeopleCount = res.data?.totalUV
          this.allRetainCount = res.data?.totalRetain
          this.pvCount = res.data?.pvCount || 0
          this.uvCount = res.data?.uvCount || 0
          this.retainCount = res.data?.retainCount || 0
        }
        this.tableLoading = false
      }).catch(() => {
        this.tableData = []
        this.tableLoading = false
      })
    },
    handleSelectionChange(val) {
      this.checkedList = val
    },
    exportDetail() {
      let customerSource = ''
      let customerWay = ''
      if (this.queryForm.sourceId) {
        if (this.queryForm.sourceId.length == 1) {
          customerSource = this.queryForm.sourceId[0]
        } else if (this.queryForm.sourceId.length == 2) {
          customerWay = this.queryForm.sourceId[1]
        }
      }
      let arr = this.checkedList.map(item => item?.viewId)
      let params = {
        startTime: this.queryForm.selectTime && this.queryForm.selectTime.length == 2 ? this.queryForm?.selectTime[0] : moment(new Date()).format('YYYY-MM-DD'),
        endTime: this.queryForm.selectTime && this.queryForm.selectTime.length == 2 ? this.queryForm?.selectTime[1] : moment(new Date()).format('YYYY-MM-DD'),
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
        pageTitle: this.queryForm.pageTitle,
        customerSource,
        customerWay,
        viewIdList: arr
      }
      console.log(params,)
      downLoadFile('/admin/capital/exportPageDetail', params, `页面详情--${moment(new Date()).format('YYYYMMDD')}.xlsx`, () => {
      }, 'post')
    },
    getSource() {
      getCapitalSource().then(res => {
        if (res.code == 200) {
          this.enumOpt.sourceIdList = res?.data?.map(item => {
            return {
              value: item.scrmGetGuestPlatId,
              label: item.scrmGetGuestPlatName,
              children: item?.children?.map(itm => {
                return {
                  label: itm.scrmSourceName,
                  value: itm.scrmGetGuestGourceId,
                }
              })
            }
          })
        }
      })
    },
    summaryMethod({columns, data}) {
      const sums = [];
      columns.forEach((column, columnIndex) => {
        switch (columnIndex) {
          case 1:
            sums.push('总计');
            break;
          case 4:
            sums.push(this.pvCount);
            break;
          case 5:
            sums.push(this.uvCount);
            break;
          case 6:
            sums.push(this.retainCount);
            break;
          case 7:
            sums.push('--')
            break;
          default:
            sums.push('')
            break
        }
      });
      return sums;
    }

  },
  mounted() {
    this.getSource()
    this.$refs.normalForm.radioDateSelect('0')
    this.handleQuery()
  },
  created() {
  },
}

</script>

<style lang="scss" scoped>
@import '@/styles/base.scss';

.app-container {
  height: 100%;
  padding: 0;
}

</style>
